<template>
  <div>
    <div class="branchStoreModel">
      <div class="crumbs">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item
            ><a href="/branchStore2">公司总部</a></el-breadcrumb-item
          >
          <el-breadcrumb-item
            ><a href="/branchStore3">分店信息</a></el-breadcrumb-item
          >
          <el-breadcrumb-item>柜台信息</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="container">
        <div class="handle-box">
          <!--选择总部-->
          <el-form
            ref="form"
            :model="baseForm"
            label-width="80px"
            class="optionMenu"
          >
          </el-form>

          <!--增加柜台-->
          <el-button
            type="primary"
            size="small"
            class="white addCompany liner"
            @click="handleAdd"
            >添加柜台信息</el-button
          >

          <!--搜索框相关-->
          <!--搜索框和搜索按钮-->
          <el-button
            type="primary"
            size="small"
            class="search-input liner"
            @click="handleSearch"
            >搜索</el-button
          >

          <div class="searchComponents">
            <el-input
              placeholder="在此输入您要搜索的内容"
              class="handle-input mr10"
              v-model="search"
            ></el-input>
          </div>
        </div>

        <!--table表格-->
        <el-table
          :data="tableData"
          border
          class="table"
          ref="multipleTable"
          header-cell-class-name="table-header"
          style="display: block"
        >

          <el-table-column label="序号" align="center" width="40">
            <template slot-scope="scope">{{
              (query.currentPage - 1) * query.pageSize + (scope.$index + 1)
            }}</template>
          </el-table-column>

          <el-table-column
            prop="id"
            label="柜台ID"
            width="200"
            align="center"
          ></el-table-column>

          <el-table-column
            prop="name"
            label="柜台名称"
            align="center"
            width="120"
          ></el-table-column>

          <!--   <el-table-column
            prop="type"
            label="柜台商品品类"
            align="center"
            width="150"
          ></el-table-column>-->

          <el-table-column label="柜台商品品类" align="center" width="150">
            <template slot-scope="scope">
              <el-tag :type="success">{{
                scope.row.type === 1
                  ? "素金类"
                  : scope.row.type === 2
                  ? "钻石类"
                  : scope.row.type === 3
                  ? "镶金类"
                  : "足金类"
              }}</el-tag>
            </template>
          </el-table-column>

          <el-table-column label="状态" align="center" width="150">
            <template slot-scope="scope">
              <el-tag :type="scope.row.state === 1 ? 'success' : 'danger'">{{
                scope.row.state === 1 ? "生效" : "失效"
              }}</el-tag>
            </template>
          </el-table-column>

          <el-table-column
            prop="s_name"
            label="分店名称"
            align="center"
            width="200"
          ></el-table-column>

          <el-table-column label="操作" width="220" align="center">
            <template slot-scope="scope">
              <!--编辑按钮-->
              <el-button
                type="text"
                class="green"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >

              <!--删除按钮(非确认删除)-->
              <el-button
                type="text"
                class="red"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <!--页码、分页-->
        <div class="pagination">
          <el-pagination
            background
            layout="total, prev, pager, next"
            :current-page="query.currentPage"
            :page-size="query.pageSize"
            :total="pageTotal"
            @current-change="handlePageChange"
          ></el-pagination>
        </div>
      </div>

      <!-- 添加弹出框 -->
      <el-dialog title="添加柜体信息" :visible.sync="addVisible" width="40%">
        <el-form ref="form" :model="addForm" label-width="70px">
          <el-form-item label="柜台名称">
            <el-input v-model="addForm.name"></el-input>
          </el-form-item>

          <!--      <el-form-item label="柜台商品品类">
            <el-input v-model="addForm.type"></el-input>
          </el-form-item>-->

          <el-form-item label="柜台商品品类">
            <el-select v-model="addForm.type" placeholder="请选择">
              <el-option
                v-for="item in vipTypeArr"
                :key="item.label"
                :label="item.label"
                :value="item.value"
                >{{ item.label }}</el-option
              >
            </el-select>
          </el-form-item>

          <el-form-item label="柜台状态">
            <el-radio-group v-model="addForm.state" size="small">
              <el-radio-button label="1">生效</el-radio-button>
              <el-radio-button label="0">失效</el-radio-button>
            </el-radio-group></el-form-item
          >

          <el-form-item label="分店名称">
            <el-input v-model="addForm.s_name"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addVisible = false" size="small">取 消</el-button>
          <el-button type="primary" @click="saveAdd" class="liner" size="small"
            >确 定</el-button
          >
        </span>
      </el-dialog>

      <!-- 编辑弹出框 -->
      <el-dialog title="编辑柜台信息" :visible.sync="editVisible" width="40%">
        <el-form ref="form" :model="editForm" label-width="70px">
          <el-form-item label="柜台ID">
            <el-input
              v-model="editForm.id"
              readonly="readonly"
              class="headquartersCode"
            ></el-input>
          </el-form-item>

          <el-form-item label="柜台名称">
            <el-input v-model="editForm.name"></el-input>
          </el-form-item>

          <!-- <el-form-item label="柜台商品品类">
            <el-input v-model="editForm.type"></el-input>
          </el-form-item>-->

          <el-form-item label="会员类型">
            <el-select v-model="editForm.type" placeholder="请选择">
              <el-option
                v-for="item in vipTypeArr"
                :key="item.label"
                :label="item.label"
                :value="item.value"
                >{{ item.label }}</el-option
              >
            </el-select>
          </el-form-item>

          <el-form-item label="门店状态">
            <el-radio-group v-model="editForm.state" size="small">
              <el-radio-button label="1">生效</el-radio-button>
              <el-radio-button label="0">失效</el-radio-button>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="分店名称">
            <el-input v-model="editForm.s_name"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editVisible = false" size="small">取 消</el-button>
          <el-button type="primary" @click="saveEdit" class="liner" size="small"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "basetable",
  data() {
    return {
      query: {
        id: "",
        name: "",
        currentPage: 1,
        pageSize: 10
      },
      tableData: [],
      multipleSelection: [],
      delList: [],
      editVisible: false,
      addVisible: false,
      /*选项框公司总部*/
      optionCompany: "",

      addForm: {},
      editForm: {},
      addLittle: {
        dobusiness: "生效"
      },
      editLittle: {
        dobusiness: ""
      },
      /*搜索框*/
      search: "",
      searchCondition: {},
      searchList: [],
      pageTotal: 0,
      // form: {},
      idx: -1,
      id: -1,
      baseForm: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: true,
        type: ["公司总部"],
        resource: "上海分公司",
        desc: ""
      },
      vipTypeArr: [
        { value: "1", label: "素金类" },
        { value: "2", label: "钻石类" },
        { value: "3", label: "镶嵌类" },
        { value: "4", label: "足金类" }
      ]
    };
  },
  created() {
    this.getData();
  },
  methods: {
    // 获取 easy-mock 的模拟数据
    getData() {
      this.$axios
        .post(
          // "http://172.16.6.121:8080/gold/Counter/findAll",
          this.$api.branchStore.branchStoreFourfindAll,
          {
            currentPage: this.query.currentPage,
            pageSize: this.query.pageSize
          },
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(res => {
          if (res.data.code == "1" && res.data.success == true) {
            console.log(res.data.data.list);
            console.log(res.data.data);
            console.log(res.data);
            var result = res.data.data.list;
            this.tableData = result;
            this.pageTotal = this.tableData.length;
            console.log(this.tableData.length);
          }
        })
        .catch(err => {
          console.log(err);
          this.$message.error("请求出错，请联系管理员");
          this.tableData = [];
          this.pageTotal = 0;
        });
    },

    // 触发搜索按钮
    handleSearch() {
      this.$axios
        .post(
          // "http://172.16.6.121:8080/gold/Counter/findByNameOrS_name",
          this.$api.branchStore.branchStoreFourfindByNameOrS_name,
          {
            name: this.search,
            currentPage: this.query.currentPage,
            pageSize: this.query.pageSize
          },
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(res => {
          console.log(res.data.data);
          console.log(res.data.data.list);
          // this.getData();
          this.pageTotal = res.data.data.list.length;
          this.tableData = res.data.data.list;
        })
        .catch(err => {
          console.log(err);
          this.$message.error("请求出错，请联系管理员");
        });
      this.$set(this.query, "currentPage", 1);
    },

    // 删除红色按钮
    handleDelete(index, row) {
      // 二次确认删除
      console.log(row);
      this.$confirm("确定要删除吗？", "提示", {
        type: "warning"
      })
        .then(() => {
          console.log(row.id);
          // this.tableData.splice(index, 1);
          /*删除成功后请求数据*/
          this.$axios
            .post(
              // "http://172.16.6.121:8080/gold/Counter/delete/id/" + row.id,
              this.$api.branchStore.branchStoreFourDelete + "/" + row.id,
              {
                headers: {
                  "Content-Type": "application/json"
                }
              }
            )
            .then(res => {
              console.log(res.data.data);
              console.log(res.data);
              this.$message.success("删除成功");
              this.getData();
              // this.tableData = res.data.data.list;
            })
            .catch(err => {
              console.log(err);
              this.$message.error("删除失败");
            });
        })
        .catch(() => {});
    },

    /*编辑操作*/
    handleEdit(index, row) {
      this.idx = index;
      this.form = row;
      this.editForm.state = row.state == 1 ? "生效" : "失效";
      this.editVisible = true;
      this.editForm = Object.assign({}, row); // 重置对象
      this.editForm.type =
        row.type == 1
          ? "素金类"
          : row.type == 2
          ? "钻石类"
          : row.type == 3
          ? "镶金类"
          : "足金类";
    },
    /*保存编辑*/
    saveEdit() {
      this.editVisible = false;
      /*保存编辑后请求数据*/
      this.$axios
        .post(
          // "http://172.16.6.121:8080/gold/Counter/update",
          this.$api.branchStore.branchStoreFourUpdate,
          this.editForm,
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(res => {
          console.log(res.data);
          console.log(res.data.data.list);
          this.$message.success("修改成功");
          this.getData();
          // this.tableData = res.data.data;
        })
        .catch(err => {
          console.log(err);
          this.$message.error("编辑失败");
        });
      this.$set(this.tableData, this.idx, this.editForm);
    },

    //添加操作
    handleAdd() {
      this.addVisible = true;
      this.addForm = {
        name: "",
        type: "1",
        type_id: "1",
        state: "1",
        s_name: ""
      };
    },

    //保存添加
    saveAdd() {
      console.log(this.addForm);
      this.addVisible = false;
      // this.addForm.type = this.addForm.type_id;

      /*保存添加并请求数据*/
      this.$axios
        .post(
          // "http://172.16.6.121:8080/gold/Counter/save",
          this.$api.branchStore.branchStoreFourSave,
          this.addForm,
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(res => {
          console.log(res.data.data.list);
          this.$message.success(`添加成功`);
          this.getData();
          // this.tableData = res.data.data.list;
        })
        .catch(err => {
          console.log(err);
          this.$message.error("添加失败");
        });
      this.$set(this.tableData, this.idx, this.addForm);
    },

    // 分页导航
    handlePageChange(val) {
      this.$set(this.query, "currentPage", val);
      this.getData();
    }
  }
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}
.dropDown {
  margin-right: 10px;
}
.handle-select {
  width: 120px;
}

.handle-input {
  margin-right: 0;
  width: 300px;
  display: inline-block;
}
.optionMenu {
  width: 260px;
  float: left;
  margin-right: 10px;
}
.searchComponents {
  height: 30px;
  width: 300px;
  float: right;
}
.search-input {
  position: relative;
  right: 10px;
}
.search-input,
.handle-input,
.selectSearch {
  float: right;
}
.selectSearch {
  width: 120px;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.green {
  color: green;
  margin-right: 5px;
}
.addCompany {
  margin-right: 10px;
  margin-top: 4px;
}
.blue {
  color: dodgerblue;
  margin-right: 5px;
}

.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
.page {
  float: right;
  margin: 10px 0;
}
</style>
